{% extends "base.html" %}
{% from "macro.html" import moment_card, photo_moment_card, render_pagination, profile_header with context %}
{% block title %}
    {{ current_user.username }}的个人主页
{% endblock %}
{% block content %}
    {{ moment.locale(auto_detect=True) }}
    <main>
        <div class="container">
            <br>
            {% include "_flash.html" %}
            {{ profile_header() }}
            <br>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active text-info-a" data-toggle="tab" href="#moment"><i class="fa fa-photo"></i> 动态</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-info-a" data-toggle="tab" href="#notReadNotification"><i class="fa fa-bell"></i> 未读 <span class="badge badge-secondary">{{ notifies|length }}</span>
                        {% if nft_counts %}
                            <span class="badge badge-info">{{ nft_counts }}</span>
                        {% endif %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-info-a" data-toggle="tab" href="#loginLog"><i class="fa fa-history"></i> 登录日志</a>
                </li>
            </ul>

            <div class="tab-content">
                <!-- 动态栏 -->
                <div id="moment" class="container tab-pane active"><br>
                    <div style="margin-bottom: 20px">
                        <ul class="nav nav-pills" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="pill" href="#blog">博客</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="pill" href="#gallery">相册</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <!-- 博客评论动态 -->
                        <div id="blog" class="tab-pane active">
                            {% for comment in blogComments %}
                                {{ moment_card(comment) }}
                            {% endfor %}
                        </div>
                        <!-- 相册评论动态 -->
                        <div id="gallery" class="tab-pane fade">
                            {% for comment in photoComments %}
                                {{ photo_moment_card(comment) }}
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- 关于通知的消息 -->
                <div id="notReadNotification" class="container tab-pane fade"><br>
                    {% if notifies %}
                        <div class="text-muted float-right"><span style="min-height: 8px;" class="badge badge-danger"><a style="color: inherit; text-decoration: none;" href="/accounts/mark-all/">全部标记为已读</a></span></div>
                        <br>
                        <hr>
                        {% for notify in notifies %}
                            <div>
                                <div class="float-right text-muted"><span class="badge badge-light"><a style="color: inherit; text-decoration: none;" href="/accounts/mark/{{ notify.id }}/">已读</a></span></div>
                                <span style="font-size: 14px;" class="text-muted"><i class="fa fa-clock-o"></i> {{ moment(notify.timestamp, local=True).fromNow(refresh=True)  }}</span>
                                <p>用户<strong>{{ notify.send_user }}</strong>在
                                    {% if notify.type == 0 %}
                                        <span class="badge badge-dark">博客</span><a href="/blog/article/{{ notify.target_id }}">{{ notify.target_name }}</a>
                                    {% else %}
                                        <span class="badge badge-success">照片</span><a href="/gallery/photo/{{ notify.target_id }}">{{ notify.target_name }}</a>
                                    {% endif %}
                                    回复你</p>
                                <h6>{{ notify.msg|safe }}</h6>
                            </div>
                            <hr>
                        {% endfor %}
                    {% else %}
                        <div>您还没有新消息!</div>
                    {% endif %}

                </div>

                <div id="loginLog" class="container tab-pane fade"><br>
                    {% if logs|length %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>时间</th>
                                    <th>IP</th>
                                    <th>地点</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for log in logs %}
                                    <tr>
                                        <td>{{ loop.index }}</td>
                                        <td>{{ log.timestamp }}</td>
                                        <td>{{ log.login_addr }}</td>
                                        <td>{{ log.real_addr }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                    <div class="float-right">
                        {{ render_pagination(pagination) }}
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>
{% endblock %}